<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    #container {
        border: 1px solid #aaa;
        border-radius: 3px;
        padding: 10px;
        margin: 10px;
        min-height: 400px;
    }
  </style>
</head>
<body>

  <h1>拖放API的扩展知识</h1>
  <h3>请拖动您的照片到下方方框区域</h3>
  <div id="container"></div>

  <div id="auto"></div>

  <script type="javascript">
    //监听document的drop事件——取消其默认行为：在新窗口中打开图片
    document.ondragover = function(e){
        e.preventDefault(); //使得drop事件可以触发
    }
    document.ondrop = function(e){
        e.preventDefault(); //阻止在新窗口中打开图片，否则仍然会执行下载操作！！！
    }

    //监听div#container的drop事件，设法读取到释放的图片数据，显示出来
    container.ondragover = function(e){
        e.preventDefault();
    }
    container.ondrop = function(e){
        console.log('客户端拖动着一张图片释放了...')
        //当前的目标对象读取拖放源对象存储的数据
        //console.log(e.dataTransfer); //显示有问题
        //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
        var f0 = e.dataTransfer.files[0];
        //console.log(f0); //文件对象 File

        //从文件对象中读取数据
        var fr = new FileReader();
        //fr.readAsText(f0); //从文件中读取文本字符串
        fr.readAsDataURL(f0); //从文件中读取URL数据
        fr.onload = function(){
            console.log('读取文件完成')
            console.log(fr.result);
            var img = new Image();
            img.src = fr.result; //URL数据
            container.appendChild(img);
        }
    }
  </script>
</body>
</html>